<template>
  <view
    :class="[...modalStyleClassNames, isShow ? 'show' : null]"
    @tap="onTapBackground"
  >
    <view class="cu-dialog" v-if="modalStyle === 'Default'">
      <view class="cu-bar bg-white justify-end">
        <view class="content" v-if="isShowTitle">Modal标题</view>
        <view class="action" @tap="onCloseModal">
          <text class="cuIcon-close text-red"></text>
        </view>
      </view>
      <view class="cu-bar bg-white">
        <view class="action text-green">确定</view>
        <view class="action text-blue" @tap="onCloseModal">取消</view>
      </view>
      <view class="padding-xl">
        Modal 内容。
      </view>
    </view>
    <view
      v-else-if="['Left', 'Right'].includes(modalStyle)"
      class="cu-dialog basis-lg"
      @tap.stop="onClick"
      :style="[{ top: '0px', height: '100vh' }]"
    >
      <view class="cu-bar bg-white solid-bottom">
        <view class="action">
          <!-- <text class="cuIcon-close text-orange"></text> -->
        </view>
        <view class="action" @tap="onCloseModal">
          <text class="cuIcon-close text-black"></text>
        </view>
      </view>
      <slot name="content"></slot>
      <!-- <view class="cu-list menu text-left">
        <view class="cu-item arrow" v-for="(item, index) in 5" :key="index">
          <view class="content">
            <view>Item {{ index + 1 }}</view>
          </view>
        </view>
      </view> -->
      <view
        class="bg-white"
        style="position:absolute;bottom: 10px;display:flex;align-items: center;align-content: center;min-width:100%;text-align:center;"
      >
        <slot name="bottomBtnBlock"></slot>
        <view class="action" style="text-align:center;min-width: 100%;">
          <el-button class="cu-btn line-green text-green" @tap="isShow = false">
            取消
          </el-button>
          <el-button class="cu-btn bg-green margin-left" @tap="">
            确定
          </el-button>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed } from "vue";
const modalStyleToClassNames = {
  Default: ["cu-modal"],
  Left: ["cu-modal", "drawer-modal", "justify-start"],
  Right: ["cu-modal", "drawer-modal", "justify-end"],
  Bottom: ["cu-modal", "bottom-modal"],
};
const props = defineProps({
  modalStyle: {
    type: String,
    default: "Default",
    validator(prop) {
      return ["Default", "Left", "Right", "Bottom"].includes(prop);
    },
  },
  isShow: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default:""
  },
});
const modalStyleClassNames = computed(() => {
  return modalStyleToClassNames[props.modalStyle];
});
const isShowTitle = computed(() => {
  return props.modalStyle === "Default" && !!props.title;
});
const onClick = (e) => {
  console.log(e);
};
const emits = defineEmits(["update:isShow"]);
const onCloseModal = () => {
  emits("update:isShow", false);
};
const onTapBackground = (e) => {
  onCloseModal();
};
</script>
<style lang="scss" scoped></style>
